/**
author: sailing
date: 2017/10/29
**/
<style>
  .upload_warp_img_div_del {
    position: absolute;
    top: 6px;
    width: 16px;
    right: 4px;
  }

  .upload_warp_img_div_top {
    position: absolute;
    top: 0;
    width: 100%;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.4);
    line-height: 30px;
    text-align: left;
    color: #fff;
    font-size: 12px;
    text-indent: 4px;
  }

  .upload_warp_img_div_text {
    white-space: nowrap;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .upload_warp_img_div img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
  }

  .upload_warp_img_div {
    position: relative;
    height: 100px;
    width: 120px;
    border: 1px solid #ccc;
    margin: 0px 30px 10px 0px;
    float: left;
    line-height: 100px;
    display: table-cell;
    text-align: center;
    background-color: #eee;
    cursor: pointer;
  }

  .upload_warp_img {
    border-top: 1px solid #D2D2D2;
    padding: 14px 0 0 14px;
    overflow: hidden
  }

  .upload_warp_text {
    text-align: left;
    margin-bottom: 10px;
    padding-top: 10px;
    text-indent: 14px;
    border-top: 1px solid #ccc;
    font-size: 14px;
    overflow: hidden;
    word-wrap: break-word;
  }

  .upload_warp_right {
    float: left;
    width: 55%;
    margin-left: 2%;
    height: 100%;
    border: 1px dashed #999;
    border-radius: 4px;
    line-height: 130px;
    color: #999;
    overflow: hidden;
    word-wrap: break-word;
    text-align: center;
  }
  .upload_warp_left  {
    position: relative;
  }
  .upload_warp_left img {
    left:50%;
    top:50%;
    position: absolute;
    transform: translate(-50%,-50%)
  }

  .upload_warp_left {
    float: left;
    width: 40%;
    height: 100%;
    border: 1px dashed #999;
    border-radius: 4px;
    cursor: pointer;
  }

  .upload_warp {
    margin: 14px;
    height: 130px;
  }

  .upload {
    margin-top: 15px;
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 0px 1px 0px #ccc;
    border-radius: 4px;
  }

  .hello {
    margin: 0 auto;
    /*margin-left: 34%;*/
  }
  .el-dialog__header{
    background: #e1e1e1;
    text-align: center;
  }
  .i-up .el-dialog {
    width: 65%;
    border: 1px solid rgb(204, 204, 204); /* 235, 238, 245 */
  }
  .i-up .el-dialog__header {
    text-align: center;
    padding: 10px 15px;
    border-radius: 4px;
    background-image:-webkit-linear-gradient(top,#f2f2f2,#e1e1e1);
    background-image: -moz-linear-gradient(top,#f2f2f2,#e1e1e1);
    background-image: -o-linear-gradient(top,#f2f2f2,#e1e1e1);
    background-image: linear-gradient(top,#f2f2f2,#e1e1e1);
    border-bottom: 1px solid #C2C2C2;
  }
</style>

<template>
  <div class='i-up'>
  	<mu-dialog title="上传图片" width="300" :open.sync="dialogUp">
      <template>
        <div class="hello">
          <!--  <el-button type='primary' size="mini" @click="limitClick(2)">点击设置上传数量：2</el-button>
               <el-button type='primary' size="mini" @click="limitClick(0)">点击取消数量设置</el-button> -->
          <div class="upload">
            <div class="upload_warp">
              <div class="upload_warp_left" @click="fileClick">
                <img src="../assets/upload.png">
              </div>
              <div class="upload_warp_right" @drop="drop($event)" @dragenter="dragenter($event)" @dragover="dragover($event)">
                或者将文件拖到此处
              </div>
            </div>
            <div class="upload_warp_text">
              选中{{imgList.length}}张文件，共{{bytesToSize(this.size)}}
            </div>
            <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none" />
            <div class="upload_warp_img" v-show="imgList.length!=0">
              <div class="upload_warp_img_div" v-for="(item,index) of imgList">
                <div class="upload_warp_img_div_top">
                  <div class="upload_warp_img_div_text">
                    {{item.file.name}}
                  </div>
                  <img src="../assets/del.png" class="upload_warp_img_div_del" @click="fileDel(index)">
                </div>
                <img :src="item.file.src">
              </div>
            </div>
          </div>
        </div>
      </template>
      <div  class="dialog-footer tRight" style="text-align:center;margin-top:2em;">
      	<mu-button slot="actions" color="primary" @click="cancelBtn" style="margin-right:2em;">取 消</mu-button>
      	<mu-button slot="actions" color="primary" @click="submitForm($event)">确 定</mu-button>
      </div>
    </mu-dialog>
  </div>
</template>

<script type="text/javascript">
  import axios from 'axios'
  import eventBus from '../server/eventBus.js'
  import fetch from '../server/fetch.js'
  export default {
    data () {
      return {
        dialogUp: false,
        file: null,
        imgList: [],
        size: 0,
        server_id: '' // 199568 100757 100465
      }
    },
    components: {
    },
    mounted () {
      eventBus.$on('showUpload', this.showUploadPanel.bind(this))
    },
    methods: {
      getFile (event) {
        this.file = event.target.files[0]
        // console.log(this.file)
      },
      submitForm () {
        var formData, path
        path = '/equipment/uploadpicture/?' + this.server_id
        console.log(' this.server_id',  this.server_id)
        formData = new FormData()
        formData.append('id', this.server_id)
        if (this.imgList.length > 0) {
          for (var i = 0; i < this.imgList.length; i++) {
            formData.append('imgStr', this.imgList[i].file)
            console.log(formData)
          }
          fetch.axiosPostFun({
            data: formData,
            callback: ((res) => {
              if (res.code == 1) {
                this.$message.success(res.message)
                this.dialogUp = false
                var str = res.data.name.split('-')[0]
                this.$emit('reloadInit')
              } else {
                this.$message.error(res.message)
                this.dialogUp = true
              }
              this.imgList = []
              this.size = 0
            }),
            url: path,
            err: ((err) => {
              console.log(err)
            })
          })
        } else {
          this.$message.warning({
            message: '请上传图片'
          })
        }
      },
      cancelBtn () {
        // console.log(236)
        this.dialogUp = false
        this.imgList = []
        this.size = 0
      },
      // 限制上传数量
      limitClick (state) {
        this.imgList = []
        if (state === 2) {
          this.limit = 2
        } else {
          this.limit = undefined
        }
      },
      // 1开始
      fileClick () {
        // console.log('触发时机1')
        document.getElementById('upload_file').click()
      },
      // 2选择
      fileChange (el) {
        // console.log('触发时机2')
        if (!el.target.files[0].size) return
        this.fileList(el.target)
        el.target.value = ''
      },
      // 3加载
      fileList (fileList) {
        console.log('触发时机3', fileList.files)
        let files = fileList.files
        for (let i = 0; i < files.length; i++) {
          // 判断是否为文件夹
          if (files[i].type !== '') {
            this.fileAdd(files[i])
          } else {
            //  文件夹处理
            this.folders(fileList.items[i])
          }
        }
      },
      // 文件夹处理
      folders (files) {
        let _this = this
        // 判断是否为原生file
        if (files.kind) {
          files = files.webkitGetAsEntry()
        }
        files.createReader().readEntries(function (file) {
          for (let i = 0; i < file.length; i++) {
            if (file[i].isFile) {
              _this.foldersAdd(file[i])
            } else {
              _this.folders(file[i])
            }
          }
        })
      },
      foldersAdd (entry) {
        let _this = this
        entry.file(function (file) {
          _this.fileAdd(file)
        })
      },
      fileAdd (file) {
        if (this.limit !== undefined) this.limit--
        if (this.limit !== undefined && this.limit < 0) return
        // 总大小
        this.size = this.size + file.size
        // 判断是否为图片文件
        if (file.type.indexOf('image') === -1) {
          // file.src = 'wenjian.png'
          this.imgList.push({
            file
          })
        } else {
          let reader = new FileReader()
          reader.vue = this
          reader.readAsDataURL(file)
          reader.onload = function () {
            file.src = this.result
            this.vue.imgList.push({
              file
            })
          }
        }
      },
      fileDel (index) {
        this.size = this.size - this.imgList[index].file.size // 总大小
        this.imgList.splice(index, 1)
        if (this.limit !== undefined) this.limit = this.imgList.length
      },
      bytesToSize (bytes) {
        if (bytes === 0) return '0 B'
        var k = 1000, // or 1024
          sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
          i = Math.floor(Math.log(bytes) / Math.log(k))
        return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]
      },
      dragenter (el) {
        el.stopPropagation()
        el.preventDefault()
      },
      dragover (el) {
        el.stopPropagation()
        el.preventDefault()
      },
      drop (el) {
        el.stopPropagation()
        el.preventDefault()
        this.fileList(el.dataTransfer)
      },
      showUploadPanel (row) {
        console.log('row', row.id)
        this.dialogUp = true
        this.server_id = row.id
      }
    }
  }
</script>>
